<template>
    <div class="container">
        <el-drawer title="新增点位信息" :visible.sync="isShow" direction="rtl" :before-close="handleClose">
            <el-card class="box-card">
                <el-form label-position="right" label-width="80px" :model="locationData">
                    <el-form-item label="地址">
                        <el-input v-model="locationData.address"></el-input>
                    </el-form-item>
                    <el-form-item label="区">
                        <el-input v-model="locationData.district"></el-input>
                    </el-form-item>
                    <el-form-item label="街道">
                        <el-input v-model="locationData.town"></el-input>
                    </el-form-item>
                    <el-form-item label="社区/村">
                        <el-input v-model="locationData.community"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人">
                        <el-input v-model="locationData.responsiblePerson"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话">
                        <el-input v-model="locationData.contactNumber"></el-input>
                    </el-form-item>
                </el-form>

                <el-button type="danger" @click="clear">删除点</el-button>
                <el-button type="primary" @click="save">{{ !locationData.id ? '保存' : '更新' }}</el-button>
                <el-button type="warning" @click="_openCircleEditor">打开标点编辑器</el-button>
                <el-button type="warning" @click="toBuilding(locationData.id)" v-if="locationData.id">查看区域楼栋</el-button>
            </el-card>
        </el-drawer>
    </div>
</template>

<script>
const defaultData = {
    address: '',
    district: '',
    town: '',
    community: '',
    responsiblePerson: '',
    contactNumber: '',
    centerTude: '',
    radius: 0,
    id: 0
};
export default {
    name: 'EditLocationPanel',
    props: ['openCircleEditor', 'closeCircleEditor'],
    data() {
        return {
            isShow: false,
            locationData: {
                address: '',
                district: '',
                town: '',
                community: '',
                responsiblePerson: '',
                contactNumber: '',
                centerTude: '',
                radius: 0,
                id: 0
            },
            circle: null,
        };
    },
    methods: {
        handleClose(done) {
            this.close();
        },
        open(circle) {
            this.circle = circle;
            const content = circle.getCenter();
            const radius = circle.getRadius();

            if (!this.isCircleExtDataNull()) {
                this.locationData = { ...circle.getExtData() };
            } else {
                this.locationData = { ...defaultData };
            }

            this.locationData.centerTude = `[${content.lng},${content.lat}]`;
            this.locationData.radius = radius;

            this.isShow = true;
        },
        close() {
            this.isShow = false;
        },

        save() {
            if (this.isCircleExtDataNull()) {
                this.add();
            } else {
                this.update();
            }
        },

        add() {
            const __success = data => {
                // 设置图形颜色
                this.circle.setOptions({
                    ...this.circle.getOptions(),
                    fillColor: '#12b886',
                });

                // 设置标点数据
                this.circle.setExtData(data);

                this.$message.success('标点添加成功');
                this.close();
            };

            const __fail = e => {
                this.$message.error('标点添加失败');
            };

            this.$http({
                url: this.$http.adornUrl('mark/markRegion'),
                method: 'post',
                data: this.$http.adornData(this.locationData),
            })
                .then(res => {
                    if (res.status === 200 && res.data) {
                        // 成功
                        __success(res.data);
                    } else {
                        // 失败
                        __fail();
                    }
                })
                .catch(err => {
                    __fail(err);
                });
        },

        update() {
            const __success = data => {
                // 设置标点数据
                this.circle.setExtData(data);
                this.$message.success('标点修改成功');
                this.close();
            };

            const __fail = e => {
                this.$message.error('标点修改失败');
            };

            this.$http({
                url: this.$http.adornUrl('mark/artelRegion'),
                method: 'post',
                data: this.$http.adornData(this.locationData),
            })
                .then(res => {
                    if (res.status === 200 && res.data) {
                        // 成功
                        __success(this.locationData);
                    } else {
                        // 失败
                        __fail();
                    }
                })
                .catch(err => {
                    __fail(err);
                });
        },

        isCircleExtDataNull() {
            return !this.circle.getExtData().id;
        },

        clear() {
            const __removeCircle = () => {
                this.circle.remove();
                this.circle = null;
            };
            const __success = () => {
                __removeCircle();
                this.$message.success('标点删除成功');
                this.close();
            };

            const __fail = e => {
                this.$message.error('标点删除失败');
            };

            if (!this.isCircleExtDataNull()) {
                // 存在数据, 先将数据库数据清除
                const id = this.circle.getExtData().id;
                this.$http({
                    url: this.$http.adornUrl('mark/removeRegion'),
                    method: 'post',
                    data: this.$http.adornData({ id: id }),
                })
                    .then(res => {
                        __success();
                    })
                    .catch(err => {
                        __fail(err);
                    });
            } else {
                __removeCircle();
                this.close();
            }
        },

        _openCircleEditor() {
            this.openCircleEditor();
            this.close();
        },

        toBuilding(id){
            this.close()
            this.$router.push("/location-building?id=" + id)
            // this.$router.push("{ path: 'location/location-building',}")
        }
    },
};
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
}
.box-card {
    margin: 0px 10px;
}
</style>
